<template>
    <z-paging>
        <u-sticky>
            <hedsty :headCentext="'商品详情'"></hedsty>
        </u-sticky>
        <view class="image_box">
            <image :src="shopObj.image" mode="widthFix" />
        </view>
        <view class="dizuo_box" style="background-image: url('https://morgan.dingxians.cn/static/shopdetail/10.png');"></view>
        <view class="zhongjiannamme_vbix" style="background-image: url('https://morgan.dingxians.cn/static/shopdetail/1.png');">
            <view class="left_bname_box">{{ shopObj.title }} </view>
            <view class="rt_price_box">¥ {{ shopObj.price }}</view>
        </view>
        <view class="content_box" v-html="shopObj.content">

        </view>
        <view class="s" style="height: 172rpx;"></view>
        <view class="goumai_box">
            <view class="leftds_box">
                <view class="images_box">
                    <image src="https://morgan.dingxians.cn/static/shopdetail/3.png" mode="scaleToFill" />
                    <!-- <image
                        src="https://morgan.dingxians.cn/static/shopdetail/4.png"
                        mode="scaleToFill"
                    /> -->
                </view>
                <view class="wenzi">收藏</view>
            </view>
            <view class="rtds_box" style="background-image: url('https://morgan.dingxians.cn/static/shopdetail/2.png');" @click="goumai">立即购买
            </view>
        </view>
        <shopapliy :recordShow="recordShow" @handlePopup="handlePopupchild" :value="setpValue" :user_index="setpValue"
            @update:value="updateUserPoint" @detailedchange="detailedchange" @payType="payType" :payId="payId"
            :price="shopObj.price" :zongPrice="zongPrice"  :shopNmae="shopObj.title" :shopImg="shopObj.image" :orderDetail="orderDetail"
            @selAddressBtn="selAddressBtn" @editBtn="editBtn" @enterSubmit="$no(enterSubmit)"></shopapliy>
    </z-paging>
</template>
<script>
import hedsty from '../components/hedsty.vue'
import shopapliy from '../components/shopapliy.vue'
export default {
    components: {
        hedsty, shopapliy
    },
    data() {
        return {
            noClick:true,
            recordShow: false,
            setpValue: 1,
            // #ifndef MP-ALIPAY
            payId: 1,
            // #endif
            // #ifdef MP-ALIPAY
            payId: 3,
            // #endif
            shopId: '',
            shopObj: {},
            orderDetail:{
                user_address:{},
                user_prizes:{}
            },
            remarkvalue:''
        }
    },
    onLoad(e) {
        this.shopId = e.id
    },
    onShow() {
        this.gitDetail()
        if(Object.keys(this.$store.state.orderDetail.user_address).length > 0){
            this.orderDetail.user_address = this.$store.state.orderDetail.user_address
            this.getOrder(this.$store.state.orderDetail.user_address.id)
        }else{
            this.getOrder(this.orderDetail.user_address.id)
        }
    },
    computed: {
        zongPrice() {
            let total_price = 0
            total_price += (this.shopObj.price * this.setpValue)
            return total_price
        },
    },
    methods: {
        gitDetail() {
            this.$Request.get(this.$api.shop.goods + `/${this.shopId}`).then(res => {
                if (res.code == 200) {
                    this.shopObj = res.data
                }
            })
        },
        goumai() {
            this.getOrder(this.orderDetail.user_address.id)
            this.recordShow = true
        },
        handlePopupchild() {
            this.recordShow = false
        },
        updateUserPoint({ value, userIndex }) {
            this.setpValue = value;
            this.getOrder(this.orderDetail.user_address.id)
        },
        detailedchange(e) {
            console.log(e)
            this.remarkvalue = e
        },
        payType(item) {
            this.payId = item.id
            this.getOrder(this.orderDetail.user_address.id)
        },
        getOrder(id) {
			let data = {
				user_address_id: id,
				goods_sku_id: this.shopObj.sku[0].id,
				num: this.setpValue,
				type:this.payId
			}
			this.$Request.get(this.$api.shop.goodsOrder, data).then(res => {
				if (res.code == 200) {
					this.orderDetail = res.data
				}
			})
		},
        selAddressBtn(){
            this.$router('/userPage/address/address?is_Back=' + true)
        },
        editBtn(item){
            this.$router('/userPage/address/editaddress?is_Back=' + true + '&item=' + JSON.stringify(item))
        },
        enterSubmit() {
			let data = {
				user_address_id: this.orderDetail.user_address.id,
				pay_type: this.payId == 3?'1' : this.payId == 1?'1' :'2',
				type: this.payId == 3?'3' : '2',
				remark: this.remarkvalue,
				coupon_id: '',
				goods_sku_id: this.shopObj.sku[0].id,
				num: this.setpValue,
                tag:0

			}
			this.$Request.post(this.$api.shop.orders, data).then(res => {
				if (res.code == 200) {
					if (res.data.order_status == 2) {
						this.$msg('购买成功')
						setTimeout(() => {
							this.$router('/userPage/order/order?status=' + 2)
						}, 500)
					} else {
						var pay_data = res.data
						if (pay_data.order_status == 1) {
							if (this.payId == 3) {//支付宝
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: pay_data.data.trade_no,
									success: (res) => {
										// this.$msg('支付成功')
                                        this.$router('/userPage/order/order?status=' + 2)
									},
									fail: (error) => {
                                        this.$router('/userPage/order/order?status=' + 5)
									},
								})
							} else {
								// #ifdef APP-PLUS
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: pay_data.data,
									success: (res) => {
										this.$msg('支付成功')
                                        this.$router('/userPage/order/order?status=' + 2)
									},
									fail: (error) => {
                                        this.$router('/userPage/order/order?status=' + 5)
									},
								})
								// #endif
								// #ifdef MP-WEIXIN
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: pay_data.timeStamp(),
									nonceStr: pay_data.nonceStr,
									signType: 'MD5',
									package: pay_data.package,
									paySign: pay_data.paySign,
                                    success: (res) => {
                                        this.$msg('支付成功')
                                        this.$router('/userPage/order/order?status=' + 5)
                                    },
                                    fail: (err) => {
                                        this.$router('/userPage/order/order?status=' + 1)
                                    },
								})
								// #endif
							}
						}
					}


				}
			})
		},
    }
}
</script>
<style lang="scss" scoped>
.image_box {
    width: 413rpx;
    height: 500rpx;
    margin: auto;

    image {
        width: 100%;
    }
}

.dizuo_box {
    width: 600rpx;
    height: 188rpx;
    // background-color: pink;
    margin: auto;
    margin-top: -90rpx;
    margin-bottom: 28rpx;
    background-size: 100% 100%;
}

.zhongjiannamme_vbix {
    width: 690rpx;
    height: 106rpx;
    margin: auto;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20rpx 0 69rpx;
    margin-bottom: 31rpx;

    .left_bname_box {
        width: 400rpx;
        height: 106rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 120rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rt_price_box {
        height: 106rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFEDD7;
        line-height: 110rpx;
    }
}

.content_box {
    width: 690rpx;
    background: #260104;
    box-sizing: border-box;
    padding: 42rpx 20rpx;
    margin: auto;
}

.goumai_box {
    width: 100%;
    height: 172rpx;
    position: fixed;
    bottom: 0;
    background: #260104;
    box-sizing: border-box;
    padding: 13rpx 24rpx;
    display: flex;
    justify-content: space-between;

    .leftds_box {
        height: 77rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .images_box {
            width: 53rpx;
            height: 51rpx;
            margin-right: 11rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .wenzi {
            width: 87rpx;
            height: 77rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 82rpx;
        }
    }

    .rtds_box {
        width: 289rpx;
        height: 77rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        background-size: 100% 100%;
        color: #FFFFFF;
        line-height: 77rpx;
        text-align: center;
    }
}
</style>